/* eslint-disable semi */
/* eslint-disable multiline-ternary */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable no-unused-vars */
/* eslint-disable no-unused-vars */
import React, { Fragment, useState } from 'react'

// custom hooks and utility functions
import { useSkin } from '@hooks/useSkin'
import { isObjEmpty } from '@utils'

//third party packages
import classNames from 'classnames'
import { FieldArray, FormikProvider, useFormik } from 'formik'
import moment from 'moment'
import Flatpickr from 'react-flatpickr'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Col, Form, Label, Row, Spinner } from 'reactstrap'
//components
import FormGroupElement from '@src/components/formGroup/FormGroupElement'
import {
  Check,
  Mail,
  MapPin,
  PhoneCall,
  Plus,
  Trash2,
  User
} from 'react-feather'
import SelectField from '../../components/formGroup/Select'
import { updateMyProfileAction } from '../../redux/profile/profileAction'
import { getAllStripeCardAction } from '../../redux/stripe/stripeAction'
import PaymentElementsWrapper from '../modal/PaymentElementsWrapper'
import {
  PhoneUS,
  calculateYearDifference,
  dateUS,
  dateUnix,
  getModifiedValues
} from '../../utility/Utils'
import PaymentModalBox from '../modal/PaymentModalBox'
import {
  ClientFormValidationSchema,
  Employment,
  State,
  billingTypeOptions,
  gender,
  guardianStateOptions,
  languageList,
  maritalStatus,
  raceAndEthnicityOptions
} from '../profile/FormConstant'

const ProfileForm = () => {
  const dispatch = useDispatch()
  const [basicModal, setBasicModal] = useState(false)
  const [dateFormat, setDateFormat] = useState(false)
  const [nullError, setNullError] = useState(false)
  const { skin } = useSkin()

  const id = useSelector((state) => state?.auth?.user?.user_id)

  const { getMyProfile, updateLoading } = useSelector(
    (state) => state.myProfile
  )
  // states
  const modifiedClientAddresses = getMyProfile?.client_address?.filter(
    (item, i) => {
      if (
        item.address === '' &&
        i === 1 &&
        item.city === '' &&
        i === 1 &&
        item.state === '' &&
        i === 1 &&
        item.zipcode === '' &&
        i === 1
      ) {
        return
      }
      return {
        address: item?.address || '',
        city: item?.city || '',
        state: item?.state || '',
        zipcode: item?.zipcode || ''
      }
    }
  )
  // formik hook
  const formik = useFormik({
    initialValues: {
      first_name: getMyProfile?.first_name || '',
      middle_name: getMyProfile?.middle_name || '',
      last_name: getMyProfile?.last_name || '',
      suffix: getMyProfile?.suffix || '',
      preferred_name: getMyProfile?.preferred_name || '',
      is_minor: getMyProfile?.is_minor || false,
      client_guardian:
        getMyProfile?.client_guardian?.length > 0
          ? getMyProfile?.client_guardian
          : [
              {
                status: '1',
                first_name: '',
                last_name: '',
                phone_number: '',
                email: '',
                guardian_addresses: {
                  address: '',
                  city: '',
                  state: '',
                  zipcode: ''
                }
              }
            ],
      phone_number: getMyProfile?.phone_number || '',
      email: getMyProfile?.email || '',
      // emailReminder: ['appointment'],
      // phoneChecks: ['voiceMessage', 'textMessage'],
      addresses: modifiedClientAddresses || [
        {
          address: '',
          city: '',
          state: '',
          zipcode: ''
        }
      ],
      day: getMyProfile?.date_of_birth
        ? moment(getMyProfile?.date_of_birth * 1000).get('date')
        : '',
      month: getMyProfile?.date_of_birth
        ? moment(getMyProfile?.date_of_birth * 1000).get('month') + 1
        : '',
      year: getMyProfile?.date_of_birth
        ? moment(getMyProfile?.date_of_birth * 1000).get('year')
        : '',
      date_of_birth: getMyProfile?.date_of_birth || '',
      gender: getMyProfile?.gender || '',
      gender_identity: getMyProfile?.gender_identity || '',
      relationship_status: getMyProfile?.relationship_status || '',
      employment_status: getMyProfile?.employment_status || '',
      races: getMyProfile?.races || '',
      ethnicity: getMyProfile?.ethnicity || '',
      preferred_language: getMyProfile?.preferred_language || '',
      note: getMyProfile?.note || '',
      // date_started: getMyProfile?.date_started || ``,
      // formatted_date_started:
      //   moment.unix(getMyProfile?.date_started).format('MM/DD/YYYY') || ``,
      // referred_by: getMyProfile?.referred_by || '',
      billing_type: getMyProfile?.billing_type || '1'
    },
    validationSchema: ClientFormValidationSchema,
    enableReinitialize: true,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const dateString = new Date(
          `${values.month}/${values.day}/${values.year}`
        )

        const ts = moment(dateString).unix()
        const deletKeysArr = ['day', 'month', 'year', 'formatted_date_started']
        deletKeysArr.forEach((key) => delete values[key])
        const data = {
          ...values,
          email: values.email.toLowerCase(),
          date_of_birth: ts || null,
          client_guardian: !values.is_minor ? [] : values.client_guardian
        }

        const modifiedData = getModifiedValues(data, formik.initialValues)
        dispatch(updateMyProfileAction({ id, data: modifiedData }))
      }
    }
  })
  const defaultGender = gender.filter(
    (item) => item.value === parseInt(formik.values.gender)
  )[0]
  const defaultRelationship = maritalStatus.filter(
    (item) => item.value === parseInt(formik.values.relationship_status)
  )[0]
  const defaultEmployment = Employment.filter(
    (item) => item.value === parseInt(formik.values.employment_status)
  )[0]
  const defaultLanguage = languageList.filter(
    (item) => item.value === formik.values.preferred_language
  )[0]

  const dateString = moment(
    `${formik.values?.month}-${formik.values?.day}-${formik.values?.year}`
  ).format('MM-DD-YYYY')

  const difference = calculateYearDifference(dateString)
  const Age = parseInt(Number(difference), 10)

  const formatDate = (input) => {
    setDateFormat(true)
    setNullError(false)
    const formattedDate = input.replace(/[^0-9]/g, '')

    if (formattedDate.length <= 2) {
      formik.setFieldValue(`formatted_date_started`, formattedDate)
    } else if (formattedDate.length <= 4) {
      formik.setFieldValue(
        `formatted_date_started`,
        `${formattedDate.slice(0, 2)}/${formattedDate.slice(2)}`
      )
    } else {
      const date = `${formattedDate.slice(0, 2)}/${formattedDate.slice(
        2,
        4
      )}/${formattedDate.slice(4, 8)}`

      formik.setFieldValue(`formatted_date_started`, date)

      if (formattedDate.slice(4, 8).length === 4) {
        const unixDate = moment(date).unix()
        if (!isNaN(unixDate)) {
          formik.setFieldValue(`date_started`, unixDate)
          if (formik.errors.formatted_date_started !== 'Invalid date') {
            setNullError(true)
            formik.setFieldError('formatted_date_started', null)
          }
        }
      }
    }
  }

  return (
    <>
      <FormikProvider value={formik}>
        <Form onSubmit={formik.handleSubmit} className="pb-4 pt-2">
          <div className="client_profile">
            <Row>
              <Col lg={12}>
                <p className="py-1">Please fill out these forms below.</p>
              </Col>
              <Col sm={12} md={6}>
                <FormGroupElement
                  autoFocus
                  required
                  type="text"
                  label="First Name"
                  placeholder="Enter your first name"
                  labelClassName="fs-small pl-5px"
                  inputName="first_name"
                  inputClassName={classNames({
                    'form-fields  border radius-25': true,
                    lightColors: skin === 'dark'
                  })}
                  {...formik.getFieldProps('first_name')}
                  formikTouched={formik.touched.first_name}
                  formikError={formik.errors.first_name}
                />
              </Col>

              <Col sm={12} md={6}>
                <FormGroupElement
                  type="text"
                  label="Middle Name"
                  labelClassName="fs-small"
                  inputName="middle_name"
                  placeholder="Enter your middle name"
                  inputClassName={classNames({
                    'form-fields  border radius-25': true,
                    lightColors: skin === 'dark'
                  })}
                  {...formik.getFieldProps('middle_name')}
                  formikTouched={formik.touched.middle_name}
                  formikError={formik.errors.middle_name}
                />
              </Col>

              <Col sm={12} md={6}>
                <FormGroupElement
                  required
                  type="text"
                  label="Last Name"
                  labelClassName="fs-small pl-5px"
                  inputName="last_name"
                  placeholder="Enter your last name"
                  inputClassName={classNames({
                    'form-fields   border radius-25': true,
                    lightColors: skin === 'dark'
                  })}
                  {...formik.getFieldProps('last_name')}
                  formikTouched={formik.touched.last_name}
                  formikError={formik.errors.last_name}
                />
              </Col>

              <Col sm={12} md={6}>
                <FormGroupElement
                  type="text"
                  label="Suffix"
                  labelClassName="fs-small"
                  inputName="suffix"
                  placeholder="Enter your suffix"
                  inputClassName={classNames({
                    'form-fields  border radius-25': true,
                    lightColors: skin === 'dark'
                  })}
                  {...formik.getFieldProps('suffix')}
                  formikTouched={formik.touched.suffix}
                  formikError={formik.errors.suffix}
                />
              </Col>

              <Col sm={12} md={12}>
                <FormGroupElement
                  type="text"
                  placeholder="Used in place of first name across this app, including all client communication (reminders, billing, documents, etc)"
                  label="Preferred Name"
                  labelClassName="fs-small"
                  inputName="preferred_name"
                  inputClassName={classNames({
                    'form-fields  border radius-25': true,
                    lightColors: skin === 'dark'
                  })}
                  {...formik.getFieldProps('preferred_name')}
                  formikTouched={formik.touched.preferred_name}
                  formikError={formik.errors.preferred_name}
                />
              </Col>

              {/* <span className="fs-small">
                Used in place of first name across ethera, as well as in client
                communication (reminders, billing, documents, etc)
              </span> */}

              <Col sm={12} md={6}>
                <FormGroupElement
                  inputType="checkbox"
                  // checked={minor}
                  label="Client is a minor"
                  labelClassName="pl-10px"
                  inputName="is_minor"
                  // onChange={() => setMinor(!minor)}
                  inputClassName="form-fields  skin-change"
                  formGroupClassName="client_profile--checkbox mt-2 mb-2 sm-screen-mt"
                  checked={formik.values.is_minor === true}
                  value={formik.values.is_minor}
                  {...formik.getFieldProps('is_minor')}
                  formikTouched={formik.touched.is_minor}
                  formikError={formik.errors.is_minor}
                />
              </Col>

              {formik.values?.is_minor && (
                <FieldArray
                  name="client_guardian"
                  render={(arrayHelpers) => (
                    <>
                      {formik.values?.client_guardian?.map(
                        (client_guardian, itemIndex) => (
                          <Fragment key={itemIndex}>
                            <>
                              <div className="client_profile--radiosAndChecks mb-1">
                                <p className="mb-1 f-bold">Status: </p>
                                {guardianStateOptions.map((item, index) => (
                                  <Fragment key={index}>
                                    <FormGroupElement
                                      inputType="radio"
                                      inputName={`client_guardian[${itemIndex}]-${item.value}`}
                                      label={item.label}
                                      formGroupClassName="client_profile--checkbox mt-0"
                                      inputClassName="skin-change"
                                      value={
                                        formik.values.client_guardian[itemIndex]
                                          .status
                                      }
                                      checked={
                                        formik.values.client_guardian[itemIndex]
                                          .status === `${item.value}`
                                      }
                                      onChange={() =>
                                        formik.setFieldValue(
                                          `client_guardian[${itemIndex}].status`,
                                          item.value
                                        )
                                      }
                                    />
                                  </Fragment>
                                ))}
                              </div>

                              <Col sm={12} md={6}>
                                <FormGroupElement
                                  inputType="text"
                                  label="First Name"
                                  placeholder="Enter your first name"
                                  inputName={`client_guardian[${itemIndex}].first_name`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].first_name`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.first_name
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.first_name
                                  }
                                />
                              </Col>

                              <Col sm={12} md={6}>
                                <FormGroupElement
                                  inputType="text"
                                  label="Last Name"
                                  placeholder="Enter your last name"
                                  inputName={`client_guardian[${itemIndex}].last_name`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].last_name`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.last_name
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.last_name
                                  }
                                />
                              </Col>

                              <Col sm={12} md={6}>
                                <FormGroupElement
                                  required
                                  inputType="text"
                                  label="Phone"
                                  labelClassName="pl-5px"
                                  placeholder="Enter your phone number"
                                  inputName={`client_guardian[${itemIndex}].phone_number`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  value={
                                    formik.values?.client_guardian?.[itemIndex]
                                      ?.phone_number
                                  }
                                  onChange={(e) =>
                                    formik.setFieldValue(
                                      `client_guardian[${itemIndex}].phone_number`,
                                      PhoneUS(e.target.value)
                                    )
                                  }
                                  onBlur={formik.handleBlur}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.phone_number
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.phone_number
                                  }
                                />
                              </Col>

                              <Col sm={12} md={6}>
                                <FormGroupElement
                                  required
                                  inputType="email"
                                  label="Email"
                                  labelClassName="pl-5px"
                                  placeholder="Enter your email address"
                                  inputName={`client_guardian[${itemIndex}].email`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].email`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.email
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.email
                                  }
                                />
                              </Col>

                              {/* <Col sm={12} md={6}>
                            <Button
                              className="mt-1 btn-green-large"
                            >
                              <Monitor size={15} />
                              <span>Send Client Portal Access</span>
                            </Button>
                          </Col>

                          <Col sm={12} md={6}>
                            <div className="mt-1 btn-large-transparent">
                              Portal Access : <strong>Pending</strong>
                            </div>
                          </Col> */}

                              <Col sm={12}>
                                <FormGroupElement
                                  inputType="text"
                                  label="Address"
                                  placeholder="Street address"
                                  inputName={`client_guardian[${itemIndex}].guardian_addresses.address`}
                                  formGroupClassName="mt-2"
                                  inputClassName="form-fields radius-25 skin-change mb-2"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].guardian_addresses.address`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.address
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.address
                                  }
                                />
                              </Col>

                              <Col sm={12} md={4}>
                                <FormGroupElement
                                  inputType="text"
                                  placeholder="City"
                                  labelClassName="pl-10px"
                                  inputName={`client_guardian[${itemIndex}].guardian_addresses.city`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].guardian_addresses.city`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.city
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.city
                                  }
                                />
                              </Col>

                              <Col sm={12} md={4}>
                                <div
                                  // style={{ height: '80px' }}
                                  className="custom-select"
                                >
                                  <SelectField
                                    header={false}
                                    search={false}
                                    menuHeight="16rem"
                                    className="plr-0 position-relative "
                                    placeholder="State"
                                    value={{
                                      text:
                                        formik.values?.client_guardian?.[
                                          itemIndex
                                        ]?.guardian_addresses?.state || 'State',
                                      value:
                                        formik.values?.client_guardian?.[
                                          itemIndex
                                        ]?.guardian_addresses?.state
                                    }}
                                    data={State}
                                    onChange={(e) =>
                                      formik.setFieldValue(
                                        `client_guardian[${itemIndex}].guardian_addresses.state`,
                                        e.value
                                      )
                                    }
                                  />
                                </div>
                              </Col>
                              <Col sm={12} md={4}>
                                <FormGroupElement
                                  inputType="number"
                                  placeholder="zip code"
                                  labelClassName="pl-10px"
                                  inputName={`client_guardian[${itemIndex}].guardian_addresses.zipcode`}
                                  inputClassName="form-fields radius-25 skin-change"
                                  {...formik.getFieldProps(
                                    `client_guardian[${itemIndex}].guardian_addresses.zipcode`
                                  )}
                                  formikTouched={
                                    formik.touched.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.zipcode
                                  }
                                  formikError={
                                    formik.errors.client_guardian?.[itemIndex]
                                      ?.guardian_addresses?.zipcode
                                  }
                                />
                              </Col>
                              {formik.values?.client_guardian.length > 1 && (
                                <Col sm={12} className="text-align-right my-1">
                                  <Trash2
                                    size={20}
                                    color="red"
                                    onClick={() =>
                                      arrayHelpers.remove(itemIndex)
                                    }
                                  />
                                </Col>
                              )}
                            </>
                          </Fragment>
                        )
                      )}
                      <Col sm={12} md={6}>
                        <Button
                          className={classNames({
                            'add-more': true,
                            'd-none':
                              formik.values?.client_guardian?.length === 2
                          })}
                          onClick={() => {
                            arrayHelpers.push({
                              status: '1',
                              first_name: '',
                              last_name: '',
                              phone_number: '',
                              email: '',
                              guardian_addresses: {
                                address: '',
                                city: '',
                                state: '',
                                zipcode: ''
                              }
                            })
                          }}
                        >
                          <Plus size={15} /> <span>Secondary Contact</span>
                        </Button>
                      </Col>
                    </>
                  )}
                />
              )}
            </Row>
          </div>
          <hr />

          {/* Phone */}
          <>
            <div className="client_profile--tags side-box">
              <PhoneCall size={16} color="#000" />
              <span>Phone</span>
            </div>
            <div className="client_profile">
              <Row className="mt-1">
                <Col sm={12} md={12} lg={6} className="col-posiiton">
                  <FormGroupElement
                    inputType="text"
                    label="Phone"
                    inputName="phone_number"
                    placeholder="(123) 456-7890"
                    inputClassName="form-fields radius-25 skin-change"
                    value={formik.values.phone_number}
                    onChange={(e) =>
                      formik.setFieldValue(
                        'phone_number',
                        PhoneUS(e.target.value)
                      )
                    }
                    formikTouched={formik.touched.phone_number}
                    formikError={formik.errors.phone_number}
                  />
                </Col>
                {/* <Col sm={12} md={12} lg={6}>
                <div className="d-flex align-items-center mt-2">
                  {phoneOptions.map((item, index) => (
                    <Fragment key={index}>
                      <FormGroupElement
                        type="checkbox"
                        inputName={item.value}
                        label={item.label}
                        labelClassName="fs-small "
                        formGroupClassName="client_profile--checkbox checkbox-top"
                        inputClassName={classNames({
                          lightColors: skin === 'dark'
                        })}
                        // defaultChecked={formik.values.phoneChecks.includes(
                        //   item.value
                        // )}
                        value={item.value}
                        onChange={(e) =>
                          formik.setFieldValue(
                            'phoneChecks',
                            e.target.checked
                              ? [...formik.values.phoneChecks, item.value]
                              : formik.values.phoneChecks.filter(
                                  (value) => value !== item.value
                                )
                          )
                        }
                      />
                    </Fragment>
                  ))}
                </div>
              </Col> */}
              </Row>
            </div>
            <hr />
          </>

          {/* Email */}
          <>
            <div className="client_profile--tags">
              <Mail size={16} color="#000" />
              <span>Email</span>
            </div>
            <div className="client_profile">
              <Row className="align-items-center mt-1">
                <Col sm={12} md={6} lg={6}>
                  <FormGroupElement
                    type="email"
                    label="Email"
                    labelClassName="fs-small "
                    inputName="email"
                    placeholder="Enter your email address"
                    inputClassName={classNames({
                      'form-fields border radius-25': true,
                      lightColors: skin === 'dark'
                    })}
                    {...formik.getFieldProps('email')}
                    formikTouched={formik.touched.email}
                    formikError={formik.errors.email}
                  />
                </Col>
                <Col lg={6} md={6}></Col>

                {/* <Col sm={12} md={6} lg={6}>
                <div className="client_profile--radiosAndChecks ml-1">
                  <strong className="fs-small">
                    Send email reminders for:{' '}
                  </strong>
                  {emailReminderOptions.map((item, index) => (
                    <Fragment key={index}>
                      <FormGroupElement
                        type="checkbox"
                        inputName={item.value}
                        label={item.label}
                        labelClassName="fs-small "
                        formGroupClassName="client_profile--checkbox"
                        inputClassName={classNames({
                          lightColors: skin === 'dark'
                        })}
                        defaultChecked={formik.values.emailReminder.includes(
                          item.value
                        )}
                        value={item.value}
                        onChange={(e) =>
                          formik.setFieldValue(
                            'emailReminder',
                            e.target.checked
                              ? [...formik.values.emailReminder, item.value]
                              : formik.values.emailReminder.filter(
                                  (value) => value !== item.value
                                )
                          )
                        }
                      />
                    </Fragment>
                  ))}
                </div>
              </Col> */}
              </Row>
            </div>
            <hr />
          </>

          {/* Client Address */}
          <>
            <div className="client_profile--addressTag">
              <div className="client_profile--tags">
                <MapPin size={20} color="#000" />
                <span>Address</span>
              </div>
              <p>
                Required for insurance billing - please use the client's address
                they have on file with their insurance provider:
              </p>
            </div>

            <div className="client_profile">
              <Row className="align-items-start">
                <FieldArray
                  name="addresses"
                  render={(arrayHelpers) => (
                    <>
                      {formik.values?.addresses?.map((addresses, index) => (
                        <Fragment key={index}>
                          <Col sm={12}>
                            <FormGroupElement
                              inputType="text"
                              label="Address"
                              placeholder="Street Address"
                              formGroupClassName="mt-1"
                              inputName={`addresses[${index}].address`}
                              inputClassName="form-fields radius-25 skin-change mb-2"
                              {...formik.getFieldProps(
                                `addresses[${index}].address`
                              )}
                              formikTouched={
                                formik.touched.addresses?.[index]?.address
                              }
                              formikError={
                                formik.errors.addresses?.[index]?.address
                              }
                            />
                          </Col>
                          <Col sm={12} md={4}>
                            <FormGroupElement
                              inputType="text"
                              placeholder="City"
                              inputName={`addresses[${index}].city`}
                              inputClassName="form-fields radius-25 skin-change"
                              {...formik.getFieldProps(
                                `addresses[${index}].city`
                              )}
                              formikTouched={
                                formik.touched.addresses?.[index]?.city
                              }
                              formikError={
                                formik.errors.addresses?.[index]?.city
                              }
                            />
                          </Col>
                          <Col sm={12} md={4}>
                            <SelectField
                              header={false}
                              search={false}
                              menuHeight="18rem"
                              className="plr-0 position-relative"
                              placeholder="Select State"
                              value={{
                                text:
                                  formik.values?.addresses[index]?.state ||
                                  'State',
                                value: formik.values?.addresses[index]?.state
                              }}
                              data={State}
                              onChange={(e) =>
                                formik.setFieldValue(
                                  `addresses[${index}].state`,
                                  e.value
                                )
                              }
                            />
                          </Col>
                          <Col sm={12} md={4}>
                            <FormGroupElement
                              inputType="number"
                              placeholder="zip code"
                              labelClassName="pl-10px"
                              inputName={`addresses[${index}].zipcode`}
                              inputClassName="form-fields  radius-25 skin-change"
                              {...formik.getFieldProps(
                                `addresses[${index}].zipcode`
                              )}
                              formikTouched={
                                formik.touched.addresses?.[index]?.zipcode
                              }
                              formikError={
                                formik.errors.addresses?.[index]?.zipcode
                              }
                            />
                          </Col>
                          {formik.values.addresses.length > 1 && (
                            <Col sm={12} className="text-align-right">
                              <Trash2
                                size={20}
                                color="red"
                                onClick={() => arrayHelpers.remove(index)}
                              />
                            </Col>
                          )}
                        </Fragment>
                      ))}
                      <Col sm={12} md={6}>
                        <Button
                          className={classNames({
                            'add-more': true,
                            'd-none': formik.values?.addresses?.length === 2
                          })}
                          onClick={() =>
                            arrayHelpers.push({
                              address: '',
                              city: '',
                              state: '',
                              zipcode: ''
                            })
                          }
                        >
                          <Plus size={15} /> <span>Secondary Contact</span>
                        </Button>
                      </Col>
                    </>
                  )}
                />
              </Row>
            </div>
            <hr />
          </>

          {/* TODO: Client Details */}

          <>
            <div className="client_profile--tags">
              <User size={20} color="#000" />
              <span>Client Details</span>
            </div>
            <div className="client_profile">
              <Row className="align-items-center mt-1">
                <div className="col-sm-12 col-md-8">
                  <div className="d-flex align-items-center form-label ">
                    <Label className="pl-10px">Date of Birth</Label>
                  </div>
                  <Row className="pl-05px">
                    <Col xs={4} sm={3} md={3} className="sm-pe-0">
                      <FormGroupElement
                        inputType="number"
                        label="Month"
                        max={12}
                        labelClassName="pl-10px "
                        inputName="month"
                        inputClassName="form-fields radius-25 skin-change "
                        {...formik.getFieldProps('month')}
                        formikTouched={formik.touched.month}
                        formikError={formik.errors.month}
                      />
                    </Col>

                    <Col xs={4} sm={3} md={3} className="sm-pe-0">
                      <FormGroupElement
                        inputType="number"
                        label="Day"
                        max={31}
                        labelClassName="pl-10px"
                        inputName="day"
                        inputClassName="form-fields radius-25 skin-change "
                        {...formik.getFieldProps('day')}
                        formikTouched={formik.touched.day}
                        formikError={formik.errors.day}
                      />
                    </Col>
                    <Col xs={4} sm={3} md={3} className="sm-pe-0">
                      <FormGroupElement
                        inputType="number"
                        label="Year"
                        labelClassName="pl-10px"
                        inputName="year"
                        inputClassName="form-fields radius-25 skin-change"
                        {...formik.getFieldProps('year')}
                        formikTouched={formik.touched.year}
                        formikError={formik.errors.year}
                      />
                    </Col>

                    <Col
                      xs={12}
                      sm={3}
                      md={3}
                      className="d-flex align-items-center"
                    >
                      <div className="client_profile--age dark-layout-with-background whiteSpace sm-screen-mt-0 m-0">
                        <span>
                          {formik.values?.day !== '' &&
                          formik.values?.month !== '' &&
                          formik.values?.year !== ''
                            ? `${Age || '--'} years ago`
                            : '--'}{' '}
                        </span>
                      </div>
                    </Col>
                  </Row>

                  {/* <div>
                      <Label className=" fs-small pl-1">Date of Birth</Label>
                      <Flatpickr
                        data-enable-time
                        id="datePicker"
                        name="datePicker"
                        className={classNames({
                          'radius-25 form-control mb-1': true,
                          'time-date-row__dark': skin === 'dark'
                        })}
                        options={{
                          mode: 'single',
                          enableTime: false,
                          maxDate: 'today',
                          dateFormat: 'n/j/Y',
                          timezone: 'America/Los_Angeles'
                        }}
                        value={
                          formik.values?.date_of_birth !== '' &&
                          dateUS(formik?.values?.date_of_birth)
                        }
                        onChange={(date) =>
                          formik.setFieldValue('date_of_birth', dateUnix(date))
                        }
                      />
                    </div> */}

                  {/* <div
                    className={classNames({
                      'client_profile--age': true,
                      darkLayoutWhiteBackground: skin === 'dark'
                    })}
                  >
                    <span>
                      {formik.values?.date_of_birth !== ''
                        ? Age === 0
                          ? moment.unix(formik.values?.date_of_birth).fromNow()
                          : `${Age} ${Age === 1 ? 'year' : 'years'} ago`
                        : '--'}
                    </span>
                  </div> */}
                </div>

                <Col
                  sm={12}
                  md={3}
                  lg={3}
                  className="marginLeftAuto position-relative"
                  style={{ top: '25px' }}
                >
                  <SelectField
                    header={false}
                    label="Sex"
                    labelClassName="pl-10px"
                    search={false}
                    className="plr-0 position-relative"
                    value={defaultGender}
                    data={gender}
                    onChange={(e) => formik.setFieldValue(`gender`, e.value)}
                  />
                  <Label className="fs-10 pl-1">
                    Sex is only required if you file insurance claims
                  </Label>
                </Col>
                <Col sm={12} className="mt-2">
                  <FormGroupElement
                    inputType="text"
                    label="Gender Identity"
                    inputName="gender_identity"
                    inputClassName="form-fields radius-25 skin-change"
                    {...formik.getFieldProps('gender_identity')}
                    formikTouched={formik.touched.gender_identity}
                    formikError={formik.errors.gender_identity}
                  />
                </Col>
                {/* <Label className=" mb-1 padding-29 fs-10">
                  Add client's gender identity, pronouns etc
                </Label> */}

                <Col sm={12} md={6}>
                  <SelectField
                    header={false}
                    search={false}
                    className="plr-0 position-relative"
                    label="Relationship Status"
                    value={defaultRelationship}
                    data={maritalStatus}
                    onChange={(e) =>
                      formik.setFieldValue(`relationship_status`, e.value)
                    }
                  />
                </Col>

                <Col sm={12} md={6}>
                  <SelectField
                    header={false}
                    search={false}
                    className="plr-0 position-relative"
                    label="Employment Status"
                    value={defaultEmployment}
                    data={Employment}
                    onChange={(e) =>
                      formik.setFieldValue(`employment_status`, e.value)
                    }
                  />
                </Col>

                <strong className="pl-2 mt-1 mb-1">Race & Ethnicity</strong>

                <div className="client_profile--doubleCol mb-1 mx-1">
                  {raceAndEthnicityOptions.map((item, index) => (
                    <Fragment key={index}>
                      <FormGroupElement
                        inputType="checkbox"
                        inputName={item.value}
                        label={item.label}
                        formGroupClassName="client_profile--checkbox client_profile--doubleCol__50 my-0"
                        inputClassName="form-fields  skin-change"
                        value={formik.values.races}
                        checked={formik.values.races?.includes(item.value)}
                        onChange={(e) => {
                          const { checked } = e.target
                          if (checked) {
                            formik.setFieldValue('races', [
                              ...formik.values.races,
                              item.value
                            ])
                          } else {
                            const updatedCheckboxes =
                              formik.values.races.filter(
                                (checkbox) => checkbox !== item.value
                              )

                            formik.setFieldValue('races', updatedCheckboxes)
                          }
                        }}
                      />
                    </Fragment>
                  ))}
                </div>

                <Col sm={12} className="d-sm-none d-lg-block d-md-block">
                  <FormGroupElement
                    inputType="text"
                    label="Race & Ethnicity Details"
                    inputName="ethnicity"
                    placeholder="Add any relevant details about the clients's race, ethnicity and origin"
                    inputClassName="form-fields radius-25 skin-change"
                    {...formik.getFieldProps(`ethnicity`)}
                    formikTouched={formik.touched.ethnicity}
                    formikError={formik.errors.ethnicity}
                  />
                </Col>

                <Label className="mb-1 padding-29 fs-10"></Label>
              </Row>
              <Col sm={12} md={6}>
                <SelectField
                  header={false}
                  search={false}
                  menuHeight="16rem"
                  className="plr-0 position-relative"
                  label="Preferred Language"
                  value={defaultLanguage}
                  data={languageList}
                  onChange={(e) =>
                    formik.setFieldValue(`preferred_language`, e.value)
                  }
                />
              </Col>

              {/* <Col sm={12} md={4}>
                <FormGroupElement
                  inputType="string"
                  label={'Start Date'}
                  placeholder="MM/DD/YYYY"
                  // labelClassName="pl-10px"
                  id="startDate"
                  inputName="date_started"
                  inputClassName="form-fields radius-25 skin-change"
                  // value={dateUS(
                  //   formik.values?.provider_license?.[index]
                  //     ?.expire_date
                  // )}
                  // onFocus={() =>
                  //   formik.setFieldError('formatted_date_started', null)
                  // }
                  value={
                    dateFormat
                      ? formik.values?.formatted_date_started
                      : dateUS(formik.values?.date_started)
                  }
                  // value={dateUS(formik.values?.date_started)}
                  onChange={(e) => formatDate(e.target.value)}
                  // {...formik.getFieldProps(
                  //   `provider_license[${index}].expire_date`
                  // )}
                  formikTouched={true}
                  formikError={
                    !dateFormat
                      ? formik.errors?.date_started
                      : nullError
                      ? false
                      : formik.errors?.formatted_date_started
                  }
                />
                
              </Col> */}
            </div>
            <hr />
          </>

          {/* Billing Type */}
          <div className="client_profile">
            <div className="client_profile--billingType">
              <p className="f-bold fs-med black">Billing Type</p>
              <span>
                how this client will typically be paying for their services
              </span>
              <div className="client_profile--doubleCol">
                {billingTypeOptions.map((item, index) => (
                  <Fragment key={index}>
                    <FormGroupElement
                      inputType="radio"
                      inputName={item.label}
                      label={item.label}
                      formGroupClassName="client_profile--checkbox client_profile--doubleCol__20"
                      inputClassName="form-fields radius-25 skin-change"
                      value={formik.values?.billing_type}
                      checked={formik.values.billing_type === `${item.value}`}
                      onChange={() =>
                        formik.setFieldValue(`billing_type`, item.value)
                      }
                    />
                  </Fragment>
                ))}
              </div>
            </div>
          </div>
          <hr />

          {/* credit and Debit card */}
          <div className="client_profile">
            <p className="black fs-med f-bold">Credit & Debit Cards</p>
            <div className={classNames({ 'mb-1 mt-1': true })}>
              <Button
                size="sm"
                className="button-green"
                onClick={() => {
                  dispatch(getAllStripeCardAction())
                  setBasicModal(!basicModal)
                }}
              >
                Payment Information
              </Button>
            </div>
          </div>
          <hr />

          {/* Submit */}
          <div className="client_profile">
            <div className="client_profile--sub">
              <Button
                type="button"
                size="sm"
                className="button-cancel pd cancel-btn "
                onClick={() => formik.handleReset()}
              >
                Cancel
              </Button>

              <Button
                disabled={updateLoading || !formik.dirty}
                type="submit"
                size="sm"
                className="button-success pd fw-bold"
              >
                {updateLoading ? (
                  <Spinner size="sm" />
                ) : (
                  <Check size={14} strokeWidth={3} />
                )}
                <span className="pl-5px">Save</span>
              </Button>
            </div>
          </div>
        </Form>
      </FormikProvider>
      <PaymentElementsWrapper
        basicModal={basicModal}
        setBasicModal={setBasicModal}
      />
    </>
  )
}

export default ProfileForm
